<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 起步</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>{{details()}}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#vue_det',
				data:{
					site:'快手谭凝-',
					url:'www.ks.com',
					alexa:'10000'
				},
				methods:{
					details:function(){
						return this.site + '怼天怼地怼空气，快手精神小伙怕过谁！';
					}
				}
			})
		</script>
		
		<p>--------------------------------------------------------------------</p>
		<div id="vue_det1">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>Alexa:{{alexa}}</h1>
		</div>
		<script type="text/javascript">
			var data = {site:'快手谭凝-',url:'www.ks.com',alexa:'10000'}
			var vm = new Vue({
				el:'#vue_det1',
				data:data
			})
			document.write(vm.site === data.site)//true
			document.write("<br/>")
			//设置属性也会影响到原始数据
			vm.site = 'ks'
			document.write(data.site + "<br/>")
			
			data.alexa=1234
			document.write(vm.alexa)
		</script>
    </div>
	
	<p>--------------------------------------------------------------------</p>
	<div id="vue_det2">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>Alexa:{{alexa}}</h1>
		</div>
		<script type="text/javascript">
			var data = {site:'快手谭凝-',url:'www.ks.com',alexa:'10000'}
			var vm = new Vue({
				el:'#vue_det2',
				data:data
			})
			document.write(vm.$data == data)
			document.write("<br/>")
			document.write(vm.$el === document.getElementById('vue_det2'))
		</script>
	</div>
	
	</body>
</html>
